<template>
  <h-drawer
    v-model="visible"
    :width="1200"
    :loading="formSaveLoading || getWarehouseLoading"
    title="申请配件"
    unit="px"
    @close="hideDialog"
  >
    <div class="body">
      <div class="form_container">
        <div class="title">基本信息</div>
        <el-form label-position="top" :model="form">
          <div class="form_content">
            <!-- 申请类型 -->
            <el-form-item label="申请类型">
              <el-select
                v-model="form.type"
                clearable
                placeholder="申请类型"
                @change="handleChangeType"
              >
                <el-option label="公司配件" :value="1" />
                <el-option label="经销商配件" :value="2" />
              </el-select>
            </el-form-item>

            <!-- 收货人姓名 -->
            <el-form-item label="收货人姓名">
              <el-input v-model.trim="form.receiptName" clearable placeholder="收货人姓名" />
            </el-form-item>

            <!-- 收货人地址 -->
            <el-form-item label="收货人地址">
              <SingleAddress
                ref="singleAddressInstance"
                :address="singleAddressModelValue"
                class="single_address"
              />
            </el-form-item>

            <!-- 网点配件类型 -->
            <el-form-item v-if="form.type === 2" label="网点配件类型">
              <el-select
                v-model="form.networkSpareType"
                clearable
                placeholder="网点配件类型"
                :disabled="form.type !== 2"
                @change="handleChangeNetworkSpareType"
              >
                <el-option label="网点仓" :value="1" />
                <el-option label="自购备件" :value="3" />
              </el-select>
            </el-form-item>

            <!-- 收货人手机号 -->
            <el-form-item label="收货人手机号">
              <el-input
                v-model.trim.number="form.receiptPhone"
                clearable
                maxlength="11"
                placeholder="收货人手机号"
              />
            </el-form-item>

            <!-- 详细地址 -->
            <el-form-item label="详细地址">
              <el-input
                v-model.trim="form.receiptAddress"
                clearable
                maxlength="200"
                placeholder="收货人详细地址"
                show-word-limit
                size="small"
                type="textarea"
                resize="both"
              />
            </el-form-item>

            <!-- 收货地址类型 -->
            <el-form-item label="收货地址类型">
              <el-select
                v-model="form.receiptAddrType"
                clearable
                placeholder="收货地址类型"
                :disabled="form.type === 2"
                @change="handleChangeAddressType"
              >
                <el-option label="工单客户地址" :value="1" />
                <el-option label="网点地址" :value="2" />
              </el-select>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <el-table :border="true" :data="form.spareMaterialVos" resizable stripe :max-height="550">
        <!-- 序号 -->
        <el-table-column :align="'center'" fixed="left" label="序号" width="50" type="index" />

        <!-- 收支类型 -->
        <el-table-column label="结算类型" width="120">
          <template #default="{ row, $index }">
            <el-select
              v-model="row.type"
              placeholder="结算类型"
              @change="handleChangeIncomeOrPayType($index)"
            >
              <el-option v-if="!userStore.isCurrentRoleNetwork" :value="1" label="公司承担" />
              <el-option v-if="!userStore.isCurrentRoleNetwork" :value="2" label="收取客户" />
              <el-option :value="3" label="支付网点" />
            </el-select>
          </template>
        </el-table-column>

        <!-- 配件编号 -->
        <el-table-column label="配件编号" width="140">
          <template #default="{ $index }">
            <el-popover
              placement="bottom-start"
              :width="700"
              :visible="sparePartSelectPopoverVisibleList[$index]"
              popper-style="padding: 0;"
              :show-arrow="false"
            >
              <template #reference>
                <el-input
                  v-model.trim="sparePartCodeList[$index]"
                  placeholder="请输入配件编号"
                  @input="(keyword: string) => handleSparePartCodeInput(keyword, $index)"
                  @blur="sparePartSelectPopoverVisibleList[$index] = false"
                />
              </template>

              <el-table
                v-loading="getGoodListLoading"
                :border="true"
                :data="goodList"
                max-height="400"
                @row-click="(row: GoodItem) => handleSparePartOptionClick(row, $index)"
              >
                <!-- 序号 -->
                <el-table-column type="index" label="序号" :align="'center'" width="50" />

                <!-- 物料编号 -->
                <el-table-column prop="code" label="物料编号" width="140" />

                <!-- 物料名称 -->
                <el-table-column
                  show-overflow-tooltip
                  prop="name"
                  label="物料名称"
                  min-width="160"
                />

                <!-- 物料分类 -->
                <el-table-column show-overflow-tooltip prop="type" label="物料分类" width="120">
                  <template #default="{ row }">
                    {{ [row.type, row.typeTwo, row.typeThree].filter((o) => o).join('-') }}
                  </template>
                </el-table-column>
              </el-table>
            </el-popover>
          </template>
        </el-table-column>

        <!-- 配件名称 -->
        <el-table-column label="配件名称" width="140">
          <template #default="{ row }">
            <el-input :model-value="row.name" disabled />
          </template>
        </el-table-column>

        <!-- 规格 -->
        <el-table-column label="规格" width="140">
          <template #default="{ row, $index }">
            <el-select
              v-model="row.specId"
              :loading="getGoodSpecLoading"
              placeholder="请选择"
              :disabled="!row.spareId"
            >
              <template #header>
                <div class="select_header">
                  <el-input
                    v-model.trim="getGoodSpecParam.name"
                    @keyup.enter="getSpecOptionList(row.spareId, $index)"
                  />
                  <h-plain-button @click="getSpecOptionList(row.spareId, $index)">
                    搜索
                  </h-plain-button>
                </div>
              </template>
              <el-option
                v-for="item in sparePartSpecOptionList[$index]"
                :key="item.name"
                :label="item.name"
                :value="item.id"
                @click="handleSparePartSpecClick(item, $index)"
              />
            </el-select>
          </template>
        </el-table-column>

        <!-- 质保状态 -->
        <!-- <el-table-column label="质保状态" width="100">
          <template #default="{ row }">
            <el-select v-model="row.overinsured" placeholder="质保状态">
              <el-option label="保内" :value="false" />
              <el-option label="保外" :value="true" />
            </el-select>
          </template>
        </el-table-column> -->

        <!-- 申请数量 -->
        <el-table-column label="申请数量" width="80">
          <template #default="{ row }">
            <el-input v-model.trim.number="row.qty" clearable placeholder="数量" />
          </template>
        </el-table-column>

        <!-- 公司承担-->
        <el-table-column label="公司承担费用" width="100">
          <template #default="{ row }">
            <el-input v-model.trim="row.price" clearable :disabled="row.type !== 1" />
          </template>
        </el-table-column>

        <!-- 客户承担 -->
        <el-table-column label="收取客户费用" width="100">
          <template #default="{ row }">
            <el-input
              v-model.trim="row.customerUndertakePrice"
              clearable
              :disabled="row.type !== 2"
            />
          </template>
        </el-table-column>

        <!-- 网点承担 -->
        <el-table-column label="支付网点费用" width="100">
          <template #default="{ row }">
            <el-input
              v-model.trim="row.networkUndertakePrice"
              clearable
              :disabled="row.type !== 3"
            />
          </template>
        </el-table-column>

        <!-- 备注 -->
        <el-table-column label="备注" max-width="150" min-width="140">
          <template #default="{ row }">
            <el-input v-model.trim="row.remark" clearable placeholder="填写备注" />
          </template>
        </el-table-column>

        <!-- 附件 -->
        <el-table-column label="附件(最多上传8个)" :width="annexColumnWidth">
          <template #default="{ $index }">
            <div class="updata_pic">
              <template v-for="(img, index) in sparePartFileList[$index]" :key="index">
                <h-image
                  :width="60"
                  :height="40"
                  :src="img.url"
                  :initial-index="index"
                  :preview-src-list="sparePartFileList[$index].map((item) => item.url)"
                  fit="scale-down"
                  :padding="2"
                  :mask-btn-gap="3"
                  @del="handleDelFile($index, index)"
                />
              </template>
              <h-image
                v-if="sparePartFileList[$index] && sparePartFileList[$index].length < 8"
                :width="60"
                :height="37.5"
                :src="uploadPlaceholderImg"
                :padding="2"
              >
                <div style="line-height: 35.5px; height: 35.5px">
                  <el-upload
                    :auto-upload="false"
                    :on-change="(file: UploadFile) => handleUploadChange(file, $index)"
                    :show-file-list="false"
                    accept="image/*"
                    action="#"
                    multiple
                  >
                    <i class="iconfont icon-img-upload" style="font-size: 24px; color: #fff"></i>
                  </el-upload>
                </div>
              </h-image>
            </div>
          </template>
        </el-table-column>

        <!--操作-->
        <el-table-column fixed="right" label="操作" width="100">
          <template #default="{ $index }">
            <el-space :size="0" :spacer="spacer">
              <h-link
                v-if="form.spareMaterialVos.length > 1"
                type="error"
                @click="handleSparePartDel($index)"
              >
                删除
              </h-link>
              <h-link v-if="$index === 0" @click="onSparePartAddClick">添加</h-link>
            </el-space>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <template #footer>
      <h-button is-modal type="primary" @click="onSaveBtn">提交申请</h-button>
      <h-button is-modal @click="hideDialog">取消</h-button>
    </template>
  </h-drawer>
</template>

<script lang="ts" setup>
  import { h, nextTick, PropType, ref, watch } from 'vue'
  import { getOrderNetworkAddress, getWorkUserAddress } from '@/api/parts'
  import { orderAnnexUpload } from '@/api/upload'
  import SingleAddress from '@/components/address/singleAddress.vue'
  import { ElDivider, UploadFile, UploadRawFile } from 'element-plus'
  import _ from 'lodash'
  import uploadPlaceholderImg from '@/assets/image/avatar_upload_default.png'
  import { HMessage, HMessageBox } from '@/components/common/message'
  import { useGetNetworkWarehouse } from '@/services/pages/storage/useWarehouse'
  import { useUserStore } from '@/store/modules/user'
  import { useGetGoodList } from '@/services/pages/good/useGood'
  import { useGetGoodSpecService } from '@/services/module/product/useProduct'
  import { useSpareForm } from '@/services/pages/order/useSpare'

  const { form, formSaveLoading, formSave, resetForm } = useSpareForm()
  const { goodList, getGoodListParam, getGoodListLoading, getGoodList } = useGetGoodList()
  const { warehouse, getWarehouseLoading, getWarehouse } = useGetNetworkWarehouse()
  const { goodSpecList, getGoodSpecParam, getGoodSpecLoading, getProductSpecList } =
    useGetGoodSpecService()

  defineOptions({
    name: 'OrderDetailSparePartApplyModal',
  })

  const props = defineProps({
    orderDetail: {
      type: Object as PropType<OrderDetail>,
      required: true,
    },
  })

  const emits = defineEmits<{
    (e: 'update-list'): void
  }>()

  // 配件文件列表（用于表格的附件上传）
  const sparePartFileList = ref<Array<Array<{ file: UploadRawFile; url: string }>>>([])

  // 配件规格下拉选项列表（用于表格的规格下拉选择）
  const sparePartSpecOptionList = ref<Array<Array<ProductAPIResponse.ProductSpec>>>([])

  // 配件编号列表（用于表格显示）
  const sparePartCodeList = ref<Array<string>>([])

  // 配件选择弹出框显示状态列表
  const sparePartSelectPopoverVisibleList = ref<Array<boolean>>([])

  // 弹窗显示状态
  const visible = defineModel('modelValue', { type: Boolean, default: false })

  // 客户状态管理
  const userStore = useUserStore()

  // 间距组件的间隔符
  const spacer = h(ElDivider, {
    direction: 'vertical',
    style: 'display: flex; align-items: center;',
  })

  // 附件列宽
  const annexColumnWidth = ref(130)

  // 地址选择组件实例
  const singleAddressInstance = ref()

  // 地址选择组件双向绑定
  const singleAddressModelValue = ref({
    province: '',
    city: '',
    area: '',
    town: '',
  })

  /**
   * 设置附件列的宽度
   */
  const setAnnexColumnWidth = () => {
    let maxImageLength = Math.max(...sparePartFileList.value.map((item) => item.length))

    // 在图片数量小于8张时要把上传按钮的宽度计算进去
    if (maxImageLength < 8) {
      maxImageLength += 1
    }

    // 这是为了解决删剩一张图时，列宽会变得很小，导致标题会换行
    if (maxImageLength > 0) {
      annexColumnWidth.value = maxImageLength * 60 + (maxImageLength - 1) * 8 + 24
    }

    if (annexColumnWidth.value < 130) {
      annexColumnWidth.value = 130
    }
  }

  /**
   * 配件编号输入事件
   * @param {string} code - 输入的编号
   * @param {number} sparePartIndex - 配件索引
   */
  const handleSparePartCodeInput = _.debounce(async (code: string, sparePartIndex: number) => {
    const sparePart = form.value.spareMaterialVos[sparePartIndex]
    if (!sparePart) {
      return false
    }

    sparePartSelectPopoverVisibleList.value[sparePartIndex] = true
    getGoodListParam.value.keyword = code
    await getGoodList()
  }, 500)

  /**
   * 配件选择事件
   * @param sparePart - 配件对象
   * @param {number} index - 配件索引
   */
  const handleSparePartOptionClick = async (sparePart: GoodItem, index: number) => {
    form.value.spareMaterialVos[index].spareId = sparePart.id
    form.value.spareMaterialVos[index].specSku = ''
    form.value.spareMaterialVos[index].specName = ''
    form.value.spareMaterialVos[index].model = sparePart.model
    form.value.spareMaterialVos[index].name = sparePart.name
    form.value.spareMaterialVos[index].price = 0
    form.value.spareMaterialVos[index].networkUndertakePrice = 0
    form.value.spareMaterialVos[index].customerUndertakePrice = 0
    sparePartCodeList.value[index] = sparePart.code
    if (sparePart.id) {
      await getSpecOptionList(sparePart.id, index)
      const productSpecOptionList = sparePartSpecOptionList.value[index]
      if (productSpecOptionList) {
        const firstSparePartSpecOption = productSpecOptionList[0]
        if (firstSparePartSpecOption) {
          form.value.spareMaterialVos[index].specId = firstSparePartSpecOption.id
          handleSparePartSpecClick(firstSparePartSpecOption, index)
        }
      }
    }
  }

  /**
   * 收支类型改变
   * @param {number} index - 操作的表格行的索引
   */
  const handleChangeIncomeOrPayType = (index: number) => {
    /**
     * 提取选择的规格的金额
     */
    let price = 0
    const material = form.value.spareMaterialVos[index]
    const specOptionList = sparePartSpecOptionList.value[index]
    if (material) {
      if (specOptionList) {
        const feeProject = specOptionList.find((item) => item.id === material.specId)
        if (feeProject) {
          price = (material.overinsured ? feeProject.overPrice : feeProject.price) || 0
        }
      }
      form.value.spareMaterialVos[index].customerUndertakePrice = 0
      form.value.spareMaterialVos[index].price = 0
      form.value.spareMaterialVos[index].networkUndertakePrice = 0
      switch (material.type) {
        case 1:
          form.value.spareMaterialVos[index].price = price
          break
        case 2:
          form.value.spareMaterialVos[index].customerUndertakePrice = price
          break
        case 3:
          form.value.spareMaterialVos[index].networkUndertakePrice = price
          break
      }
    }
  }

  /**
   * 获取规格下拉选项方法
   * @param {string} id - 配件id
   * @param {number} index - 操作的表格行的索引
   */
  const getSpecOptionList = async (id: string, index: number) => {
    const good = goodList.value.find((item) => item.id === id)
    if (good) {
      await getProductSpecList(good.goodsType === 1 ? 'product' : 'material', id)
    }
    sparePartSpecOptionList.value[index] = goodSpecList.value
  }

  // 添加
  function onSparePartAddClick() {
    form.value.spareMaterialVos.push({
      customerUndertakePrice: 0,
      delImageIds: [],
      id: '',
      images: [],
      model: '',
      name: '',
      networkUndertakePrice: 0,
      overinsured: false,
      price: 0,
      qty: 0,
      remark: '',
      spareId: '',
      specId: '',
      specName: '',
      specSku: '',
      type: 1,
    })

    sparePartSelectPopoverVisibleList.value.push(false)
    sparePartCodeList.value.push('')
    sparePartSpecOptionList.value.push([])
    sparePartFileList.value.push([])

    if (
      form.value.type === 2 &&
      form.value.networkSpareType === 1 &&
      !warehouse.value.enableStore
    ) {
      HMessageBox.error('当前网点没有仓库不允许申请配件')
      return
    }
  }

  /**
   * 物料删除事件
   * @param sparePartIndex - 物料索引
   */
  function handleSparePartDel(sparePartIndex: number) {
    if (form.value.spareMaterialVos.length === 1) {
      return
    }
    sparePartSelectPopoverVisibleList.value.splice(sparePartIndex, 1)
    sparePartCodeList.value.splice(sparePartIndex, 1)
    sparePartSpecOptionList.value.splice(sparePartIndex, 1)
    sparePartFileList.value.splice(sparePartIndex, 1)
    form.value.spareMaterialVos.splice(sparePartIndex, 1)
  }

  // 地址类型变化
  const handleChangeAddressType = (val: 1 | 2) => {
    singleAddressInstance.value.getSelectAddr()
    switch (val) {
      case 1:
        getWorkUserAddressData()
        break
      case 2:
        getOrderNetworkAddressData()
        break
      default:
        form.value.receiptName = ''
        form.value.receiptPhone = ''
        form.value.receiptAddress = ''
        form.value.receiptProvince = ''
        form.value.receiptCity = ''
        form.value.receiptArea = ''
        form.value.receiptTown = ''
        singleAddressModelValue.value = {
          province: '',
          city: '',
          area: '',
          town: '',
        }
        singleAddressInstance.value.clearSelectAddr()
        break
    }
  }

  /**
   * 获取用户地址
   */
  const getWorkUserAddressData = () => {
    getWorkUserAddress(props.orderDetail.id).then((res) => {
      if (res.data.success) {
        form.value.userOrNetworkId = res.data.data.row.id
        form.value.receiptName = res.data.data.row.name
        form.value.receiptPhone = res.data.data.row.phone
        form.value.receiptAddress = res.data.data.row.address
        form.value.receiptProvince = res.data.data.row.province
        form.value.receiptCity = res.data.data.row.city
        form.value.receiptArea = res.data.data.row.area
        form.value.receiptTown = res.data.data.row.town
        singleAddressModelValue.value = {
          province: form.value.receiptProvince,
          city: form.value.receiptCity,
          area: form.value.receiptArea,
          town: form.value.receiptTown,
        }
      } else {
        HMessageBox.error(res.data.message)
      }
    })
  }

  /**
   * 获取网点地址
   */
  const getOrderNetworkAddressData = () => {
    getOrderNetworkAddress(props.orderDetail.id).then((res) => {
      if (res.data.success) {
        form.value.userOrNetworkId = res.data.data.row.id
        form.value.receiptName = res.data.data.row.name
        form.value.receiptPhone = res.data.data.row.phone
        form.value.receiptAddress = res.data.data.row.address
        form.value.receiptProvince = res.data.data.row.province
        form.value.receiptCity = res.data.data.row.city
        form.value.receiptArea = res.data.data.row.area
        form.value.receiptTown = res.data.data.row.town
        singleAddressModelValue.value = {
          province: form.value.receiptProvince,
          city: form.value.receiptCity,
          area: form.value.receiptArea,
          town: form.value.receiptTown,
        }
      } else {
        HMessageBox.error(res.data.message)
      }
    })
  }

  /**
   * 配件规格点击事件
   * @param val - 规格信息
   * @param index - 操作的表格行的索引
   */
  const handleSparePartSpecClick = (val: ProductAPIResponse.ProductSpec, index: number) => {
    form.value.spareMaterialVos[index].specSku = ''
    form.value.spareMaterialVos[index].specName = val.name
    const material = form.value.spareMaterialVos[index]
    if (material) {
      const price = material.overinsured ? val.overPrice : val.price
      form.value.spareMaterialVos[index].price = 0
      form.value.spareMaterialVos[index].networkUndertakePrice = 0
      form.value.spareMaterialVos[index].customerUndertakePrice = 0
      if (Number(price)) {
        switch (material.type) {
          case 1:
            form.value.spareMaterialVos[index].price = price || 0
            break
          case 2:
            form.value.spareMaterialVos[index].customerUndertakePrice = price || 0
            break
          case 3:
            form.value.spareMaterialVos[index].networkUndertakePrice = price || 0
            break
        }
      }
    }
  }

  /**
   * 保存
   */
  async function onSaveBtn() {
    if (
      form.value.type === 2 &&
      form.value.networkSpareType === 1 &&
      !warehouse.value.enableStore
    ) {
      HMessageBox.error('当前网点没有仓库不允许申请配件')
      return
    }

    for (let i = 0; i < sparePartFileList.value.length; i++) {
      const fileList = sparePartFileList.value[i]
        .filter((item) => !!item.file)
        .map((item) => item.file)
      if (fileList.length > 0) {
        const res = await orderAnnexUpload(fileList)
        form.value.spareMaterialVos[i].images = res.data.data.rows.map((o) => ({
          id: '',
          image: o,
        }))
      }
    }
    const addr = singleAddressInstance.value.getSelectAddr()
    form.value.receiptProvince = addr.province
    form.value.receiptCity = addr.city
    form.value.receiptArea = addr.area
    form.value.receiptTown = addr.town
    if (form.value.type == 1) {
      form.value.networkSpareType = 1
    }
    form.value.workId = props.orderDetail.id
    const res = await formSave()
    if (res) {
      if (res.code === 20000) {
        HMessage.success('保存成功')
        emits('update-list')
        hideDialog()
      } else {
        HMessageBox.error(res.message)
      }
    } else {
      HMessageBox.error('申请配件失败，请稍后重试')
    }
  }

  /**
   * 删除文件
   * @param {number} rowIndex - 操作的表格行的索引
   * @param {number} imgIndex - 文件索引
   */
  const handleDelFile = (rowIndex: number, imgIndex: number) => {
    sparePartFileList.value[rowIndex].splice(imgIndex, 1)
    setAnnexColumnWidth()
  }

  /**
   * 添加图片事件
   * @param {object} file - 文件
   * @param {number} index - 操作的表格行的索引
   */
  const handleUploadChange = async (file: UploadFile, index: number) => {
    if (!file.raw) {
      return
    }

    if (!file.raw.type.includes('image')) {
      HMessageBox.error('只能上传图片类型的文件')
      return
    }

    if (sparePartFileList.value[index]) {
      if (sparePartFileList.value[index].length >= 8) {
        HMessageBox.error('最多上传8个')
        return
      }
      sparePartFileList.value[index].push({
        url: URL.createObjectURL(file.raw),
        file: file.raw,
      })
      setAnnexColumnWidth()
    }
  }

  // 申请类型更新事件
  const handleChangeType = async () => {
    if (form.value.type === 2) {
      form.value.receiptAddrType = 1
      form.value.networkSpareType = 1
      await getWarehouse(props.orderDetail.networkId)
      if (!warehouse.value.enableStore) {
        HMessageBox.error('当前网点没有仓库不允许申请配件')
      }
    }
  }

  /**
   * 弹窗关闭
   */
  const hideDialog = () => {
    resetForm()
    visible.value = false
  }

  /**
   * 网点配件类型更新事件
   * @param type - 配件类型
   */
  const handleChangeNetworkSpareType = async (type: 1 | 3) => {
    if (type === 1) {
      await getWarehouse(props.orderDetail.networkId)
      if (!warehouse.value.enableStore) {
        HMessageBox.error('当前网点没有仓库不允许申请配件')
      }
    }
  }

  watch(visible, (value) => {
    if (value) {
      form.value.userId = props.orderDetail.userId
      nextTick(() => {
        if (form.value.type === 2 && form.value.networkSpareType === 1) {
          handleChangeNetworkSpareType(1)
        }
        getWorkUserAddressData()
        sparePartFileList.value = [[]]
      })
    }
  })

  watch(
    () => form.value.spareMaterialVos,
    (value) => {
      sparePartSelectPopoverVisibleList.value = value.map(() => false)
    },
    { deep: true, immediate: true },
  )
</script>

<style lang="scss" scoped>
  .body {
    display: flex;
    flex-direction: column;
    height: 100%;
    row-gap: 24px;

    .form_container {
      display: flex;
      flex-direction: column;
      gap: 12px;

      .title {
        font-size: 14px;
        font-weight: bold;
        border-left: 3px solid #007cff;
        padding-left: 6px;
      }

      :deep(.el-form) {
        .form_content {
          padding: 0 9px;
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          row-gap: 12px;
          column-gap: 32px;

          .el-form-item {
            margin: 0;
            width: 100%;

            .el-form-item__label {
              margin-bottom: 3px;
              height: 16px;
              line-height: 16px;
            }

            .el-form-item__content {
              .el-input {
                .el-input__wrapper {
                  height: 26px !important;
                }
              }

              .el-cascader {
                min-width: 300px;
              }

              .el-textarea {
                width: 100%;
                .el-textarea__inner {
                  width: 100% !important;
                  height: 28px;
                  min-height: 28px !important;
                  max-height: 120px !important;
                }
              }
            }
          }
        }
      }
    }

    .add_btn {
      padding: 30px 0 6px 0;
    }
  }

  .select_header {
    display: flex;
    column-gap: 5px;

    :deep(.el-input__wrapper) {
      height: 26px !important;
      font-size: 12px !important;
    }
  }

  :deep(.el-select__wrapper) {
    min-height: 28px !important;
    border-radius: 2px !important;
    font-size: 12px !important;
  }

  :deep(.el-input__wrapper) {
    height: 28px !important;
    font-size: 12px !important;
  }

  .title_container {
    height: 14px;
    margin-bottom: 8px;
    display: flex;

    .title_top {
      border-left: 2px solid #007cff;
      line-height: 14px;
      padding-left: 6px;
      display: inline-block;
    }
  }

  :deep(.el-form-item) {
    margin-bottom: 14px;

    .el-cascader .el-input {
      width: 220px;
    }

    .item-input {
      width: 300px;
    }

    .item-input-phone {
      width: 180px;
    }

    .item-input_w {
      width: 390px;
    }

    .el-form-item__label {
      font-size: 12px;
    }
  }

  :deep(.el-form-item .el-cascader .el-input) {
    width: 100%;
  }

  .form_sction {
    display: flex;
    align-items: flex-start;
  }

  .operation {
    display: flex;
    justify-content: center;
    align-items: center;

    .icon {
      cursor: pointer;
      margin: 0 6px;

      &:hover {
        transform: scale(1.2);
      }
    }
  }

  :deep(.el-table td.el-table__cell) {
    .el-input {
      .el-input-group__prepend {
        padding: 0 2px;
      }
    }
  }

  .btn_save {
    width: 60px;
  }

  .btn_cancel {
    width: 60px;

    &:hover {
      border: 1px solid #e5e5e5;
      color: #999;
      background-color: #e5e5e5;
    }
  }

  .footer_remark {
    margin-top: 20px;

    .w_input {
      width: 600px;
      margin-left: 10px;
    }
  }

  :deep(.updata_pic) {
    display: flex;
    align-items: center;
    gap: 8px;

    .el-upload {
      &.el-upload--picture-card {
        width: 40px;
        height: 40px;
      }
    }

    .disf_ipc {
      display: flex;
      width: 40px;
      height: 40px;
      position: relative;
      margin-right: 6px;
      border: 1px solid #7f7f7f27;
      border-radius: 4px;
      box-sizing: border-box;
      overflow: hidden;

      .img {
        width: 100%;
        position: absolute;
        border-radius: 4px;
      }

      .item-actions {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        opacity: 0;
      }

      &:hover .item-actions {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #7f7f7f9d;
        opacity: 1;
        border-radius: 4px;

        .item-preview {
          margin: 0 4px;
          cursor: pointer;

          &:hover {
            transform: scale(1.2);
          }
        }

        .item-delete {
          margin: 0 4px;
          cursor: pointer;

          &:hover {
            transform: scale(1.2);
          }
        }
      }
    }
  }
</style>
